<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="icon" href="{$_C.hy_path}images/chengyi/favicon.ico">

	<title>碧桂园－珊瑚宫殿</title>
	<link rel="stylesheet" type="text/css" href="{$_C.hy_path}css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="{$_C.hy_path}css/main.css">

	<!--[if lt IE 9]>
	  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	
	<style>
		
		
.alert {
	//border:1px solid silver;
	width: 80%;
	background-color: white;
	position: fixed;
	z-index: 99;
	top: 35%;
	left: 50%;
	margin-left: -40%;
	border-radius: 5px;
	box-shadow: 0px 0px 50px;
	text-align: center;
	display: none;
	font-size:18px;
	font-weight:500;
	text-decoration:none;
}

.alert div
{
	margin-top:10px;
	margin-bottom:20px
}

a:hover
{
	text-decoration:none;
	color:white;
}

.alert-btn {
	
	background-color: #e60012;
	display: block;
	padding: 10px;
	color: #fff;
	text-decoration: none;
	border-radius: 10px;
	
}

	</style>
	
</head>

	<body>
	<form>
		<div class="wrapper upload-wrapper">
			<div class="logo">
				<img class="img-responsive" src="{$_C.hy_path}images/chengyi/logo.png" alt="">
			</div>
			<div class="ring">
				<img class="img-responsive" src="{$_C.hy_path}images/chengyi/ring.png" alt="">
			</div>
			<div class="upload-img">
				<p>上传你和TA的照片</p>
				<label class="upload">
					<div data-img="img-area" class="send-add" >
				<img class="img-responsive" style="width:120px;height:120px;display:none" id="img-area" src="{$_C.hy_path}images/chengyi/title.png" alt="">
				</div>
					<p id="click" >点击上传</p>
				</label>
				<label class="upload">
					<div data-img="img-area2" class="send-add" >
				<img class="img-responsive" style="width:120px;height:120px;display:none" id="img-area2" src="{$_C.hy_path}images/chengyi/title.png" alt="">
				</div>
					<p id="click2" >点击上传</p>
				</label>
			</div>
			<div class="heart"   style="margin-top:-60px;width:30px;left:50%;">
				<img class="img-responsive" src="{$_C.hy_path}images/chengyi/heart.png" alt="">
			</div>
			<div class="heart">
				<img class="img-responsive" src="{$_C.hy_path}images/chengyi/heart.png" alt="">
			</div>
			<div class="title">
				<img class="img-responsive" src="{$_C.hy_path}images/chengyi/title.png" alt="">
			</div>
			<div class="btn-con">
				<div id="input"></div>
				<div id="input1"></div>
				<a class="red-btn yf-post" data-type="yes" >测测夫妻相指数</a>
			</div>
		</div>
		
		<div class="alert" id="alert2" style="padding:15px">
		
			<div id="msg" class="fs3"></div>
			
			
			<a href="javascript:void(0)" class="alert-btn fc1 fs3">确定</a>
			
		</div>
		</form>
		<script type="text/javascript" src="{$_C.hy_path}js/zepto.min.js"></script>
	<script src="{$_C.hy_path}js/jquery-1.10.2.min.js"></script>
		
	<script src="{$_C.hy_path}js/yf.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		
		
		
		<script>
		var wxid = '{$wxid}';
		</script>
		<script>
			
			
		
			
	
		
			function showMsg(msg)
			{
				$("#msg").text(msg);
				$('div#alert2').show();
			}
	
			$(function(){
				
				
				$('a.alert-btn').click(function (e) {
					$('div.alert').hide();
					});
				
				
				
				/* 表单提交  －  start */
	
				$('.yf-post').click(function(){
					
					var _this = $(this);
					var type = _this.attr('data-type');
					if(type == 'done')
					{
						showMsg("你已经上传过你和ta的照片了。");
					}
					else if(type == 'yes')
					{
						var data = {};
						var data_arr = $('form').serialize().replace(/\+/g,' ').split('&');
						for(var i=0;i<data_arr.length;i++)
						{
							var temp=data_arr[i].split('=');
							if(typeof(data[hungry.util.utf8_decode(temp[0])])!='undefined')
							{
								var arr=[];
								if(data[hungry.util.utf8_decode(temp[0])] instanceof Array)
								{
									arr=data[hungry.util.utf8_decode(temp[0])];
								}
								else
								{
									arr.push(data[hungry.util.utf8_decode(temp[0])]);
								}
									arr.push(hungry.util.utf8_decode(temp[1]));
									data[hungry.util.utf8_decode(temp[0])]=arr;
							}
							else
							{
								data[hungry.util.utf8_decode(temp[0])]=hungry.util.utf8_decode(temp[1]);
							}
						}
						_this.attr('data-type', 'no');
						_this.text('提交中');
						$.post('index.php?g=mobile&m=picture&a=send_set',data,function(result){
							if(result.error == 0)
							{
								//showMsg(result.content);
								_this.attr('data-type', 'done');
								setTimeout("window.location.href='http://bgy2.lly360.com/ws/index.php?g=mobile&m=picture&a=match'",1000);
							}
							else
							{
								
								showMsg(result.content);
								_this.attr('data-type', 'yes');
								_this.text('提交');
							}
						},'json');
					}
					else
					{
						showMsg("数据提交中");
					}
				});
				
				/* 表单提交  －  end */
				
			});
			
			/* 微信jssdk配置  －  start */
			
			wx.config({
				debug: false,
				appId: '{$jsdk.appId}',
				timestamp: {$jsdk.timestamp},
				nonceStr: '{$jsdk.nonceStr}',
				signature: '{$jsdk.signature}',
				jsApiList: [
					'chooseImage',
					'previewImage',
					'uploadImage',
					'downloadImage',
					 'onMenuShareTimeline',
		      'onMenuShareAppMessage'
				]
			});
			
			
			/* 微信jssdk配置  －  end */
			
			
			
				  
			wx.ready(function(){
				
				
				/* 分享  －  start */
				
				 wx.onMenuShareTimeline({
					 link:'http://bgy2.lly360.com/ws/index.php?g=mobile&m=picture&a=index&wxid='+wxid,
					 title: '好友邀请你 寻找克拉恋人',
					   
					    imgUrl: 'http://bgy2.lly360.com/ws/Mobile/Webroot/default/images/chengyi/share.png',
      trigger: function (res) {
       
      },
      success: function (res) {
       			
			
      },
      cancel: function (res) {
       
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
    
	wx.onMenuShareAppMessage({
		link:'http://bgy2.lly360.com/ws/index.php?g=mobile&m=picture&a=index&wxid='+wxid,
		title: '好友邀请你 寻找克拉恋人',
	    desc: '测测夫妻相指数。100分克拉恋人即可获得由碧桂园珊瑚宫殿提供的钻戒一对。',
	    imgUrl: 'http://bgy2.lly360.com/ws/Mobile/Webroot/default/images/chengyi/share.png',
    success: function () { 
	
				
    },
    cancel: function () { 
       
    }
});
	
	/* 分享  －  end */
	
	/* 图片上传  －  start */
				var num = 0; 
	
				var images = {
				    localId: [],
				    serverId: []
				  };
				
				$('.send-add').click(function(){
					var area = $(this).attr("data-img");
					
					num=0;
					/* if(num>=2)
					{
						showMsg("至多可上传2张图片");
						return;
					 }
					*/
					wx.chooseImage({
						success: function (res) {
					        images.localId = res.localIds;
					        //showMsg('已选择 ' + res.localIds.length + ' 张图片');
					        if (images.localId.length == 0) {
					  	      	showMsg('请先选择图片');
								return;
					  	    }
					        
					        if(area=="img-area")
	      		    		{
	      		    			$("#click").html("上传ing");
	      		    		}
					        else
					        {
					        	$("#click2").html("上传ing");
					        }
					        var i = 0; 
					        var length = images.localId.length;
					        images.serverId = [];
					        function upload() 
					        {
								
								if(num>=1)
								{
									
									return;
								}
								
								
								
								
								var img;
								
					        	wx.uploadImage({
					        		localId: images.localId[i],
					      		    success: function (res) {
					      		    	i++;
					      		    	num++;
					      		    	images.serverId.push(res.serverId);
					      		    	img = res.serverId;
					      		    	
					      		    	$.post('index.php?g=mobile&m=picture&a=upload_img',{ img:img,area:area },function(result){
					      		    		
					      		    		
					      		    		if(result.error == 0)
					      		    		{
												//$(result.content).insertBefore("#add");
											$("#"+area).show();
					      		    		$("#"+area).attr("src",result.img);
					      		    		if(area=="img-area")
					      		    		{
					      		    			$("#click").hide();
					      		    			$("#input").html(result.content);
					      		    		}
					      		    		else
				      		    			{
					      		    			$("#click2").hide();
					      		    			$("#input1").html(result.content);
				      		    			}
											
												//$(result.content).appendTo('.jp-textarea');
												
												
					      		    			if(i < length) 
							      	          	{
							      	            	upload();
							      	          	}
					      		    			if(i == length)
					      		    			{
//													if(num>=1)
//													{
//														$("#add").hide();
//														
//													}
					      		    				//showMsg("上传成功");
													
													
												}
												
													
					      		    			
					      		    		}
					      		    		else
					      		    		{
					      		    			showMsg('上传失败');
					      		    			return;
					      		    		}
					      		    	},'json');
					      		    }
					        	});
					        }
					        
					        upload();
					    }
					});
	
	
				/* 图片上传  －  end */
				
				});
			});
			
			
			
		</script>
	</body>
</html>
